<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/getAjax.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/ytXys.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<div class="header">
			<input type="text" id="search" placeholder="请输入查询城市" />
			<button type="button" id="searchBtn">查询</button>
		</div>
		
		<div class="weather">
			
		</div>
		<div class="title">浏览记录</div>
		<div class="history">
			
		</div>
		<div class="clear">
			<img src="img/delete.png" >
			clear
		</div>
		
		<script type="text/javascript">
			var searchDom = document.querySelector('#search');
			var weatherDom = document.querySelector('.weather');
			var searchBtnDom = document.querySelector('#searchBtn');
			var historyDom = document.querySelector(".history");
			var clearDom = document.querySelector(".clear" )
			if (localStorage.historyCity==undefined){
				var historyCity = [];
			}else{
				var historyCity = JSON.parse(localStorage.historyCity);
				showWeather(historyCity[0]);
				showHistory();
			}
			
			searchDom.onkeydown = function(e){
				if (e.key == "Enter"){
					showWeather(searchDom.value);
					searchDom.value = '';
				}
			}
			searchBtnDom.onclick = function(){
				showWeather(searchDom.value);
				searchDom.value = '';
			}
			historyDom.onclick = function(e){
				//console.log(e.target.dataset.index);
				var cityNum = e.target.dataset.index;
				showWeather(historyCity[parseInt(cityNum)]);
			}
			clearDom.onclick = function(e){
				console.log(e)
				localStorage.clear();
				historyCity = [];
				showHistory()
			}
			function remeberCity(cityName){
				//console.log(historyCity.indexOf(cityName))
				if (historyCity.indexOf(cityName) == -1){
					historyCity.unshift(cityName);
					if (historyCity.length=6){
						historyCity.pop();
						localStorage.historyCity = JSON.stringify(historyCity)
						showHistory()
					}
					
				}else{
					historyCity.splice(historyCity.indexOf(cityName),1);
					historyCity.unshift(cityName)
					localStorage.historyCity = JSON.stringify(historyCity)
					showHistory()
				}
			}
			function showHistory(){
				historyDom.innerHTML = "";
				historyCity.forEach(function(item,index){
					var cityItemDom = document.createElement('div');
					 cityItemDom.className = "cityItem";
					 cityItemDom.setAttribute("data-index",index)
					 cityItemDom.innerText = item;
					 historyDom.appendChild(cityItemDom);
				})
			}
			function showWeather(cityname){
				var httpUrl = "https://free-api.heweather.net/s6/weather/now?location="+cityname+"&key=d721bd23e5cb4535a75b7790b7912b1f"
				getAjax(httpUrl,function(res){
					//console.log(res)
					var data_string = res.responseText;
					var data = JSON.parse(data_string);
					console.log(data);
					if (data.HeWeather6[0].status=="ok"){
						remeberCity(cityname);
						var now =data.HeWeather6[0].now;
						weatherDom.innerHTML = `
						<h1>${cityname}</h1>
						<img src="https://cdn.heweather.com/cond_icon/${now.cond_code}.png" >
						<h1>温度：${now.tmp}</h1>
						<h3>体表温度：${now.fl}</h3>
						<h3>风向：${now.wind_dir} &nbsp &nbsp 风力：${now.wind_sc}</h3>
						`
					}else{
						weatherDom.innerHTML = "请输入正确城市";
					}
					
				})
			}
		</script>
	</body>
</html>
